<template>
    <div class="recharge">
      <swiper v-ref:swiper
              direction="horizontal"
              :mousewheel-control="true"
              :performance-mode="false"
              :pagination-visible="true"
              :pagination-clickable="true"
              :loop="true"
              @slide-change-start="onSlideChangeStart"
              @slide-change-end="onSlideChangeEnd"
              v-if="imagelist.length > 0">
        <div v-for="image in imagelist">
          <a :href="image.url"><img :src="image.imageurl" alt=""></a>
        </div>
      </swiper>
      <div class="body">
        <div class="list-item">
          <div class="label">V币余额</div>
          <div class="item">{{ vmoney }}V币={{ vmoney }}元</div>
        </div>
        <div class="list-item">
          <div class="label">V级</div>
          <div class="item">{{ vrank }}V级享{{ vrankdiscount }}折 <help>V级对应的折扣:
            一共三个档位,
            0V级到100V级是0.95折,
            100V级到500V级是0.9折, 500V级以上是0.85折</help></div>
        </div>
        <div class="list-item">
          <div class="label">缘分值</div>
          <div class="item">第{{ lokvalue }}位再享{{ lokvaluediscount }}折上折
            <help>缘分值对应折扣:
            一共两个档位,
            ID小于10000的是0.98折, ID大于10000的是0.99折</help></div>
        </div>
        <div class="shelf">
          <div class="label">充V币</div>
          <ul class="goods clearfix">
            <li v-for="good in vrechargelist" @click="recharge(good.vid, good.vvalue,
             good.vprice)">
              <div class="name">{{ Math.round(good.vvalue) }}V币</div>
              <div class="price">售价: {{ Math.round(good.vprice * 100) / 100 }}元</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
</template>

<script>
  import _ from 'lodash'
  import userAgent from '../assets/utils/userAgent.js'
  import webviewJavascriptBridge from '../assets/utils/webviewJavascriptBridge.js'
  import Help from './common/Help.vue'
  import Uid from '../assets/utils/uid.js'
  import api from '../assets/utils/api.js'
  import Swiper from 'vue-swiper'
  export default {
    name: 'Recharge',
    data () {
      return {
        uid: '1',
        osType: '',
        imagelist: [],
        vmoney: 0,
        vrank: 0,
        vrankdiscount: '',
        lokvalue: '',
        lokvaluediscount: '',
        vrechargelist: []
      }
    },
    components: {
      Help,
      Swiper
    },
    created () {
      this.osType = userAgent.getOS()
      // return api.apiCall('vmoneyVmoneyRecharge', {
      //   uid: this.uid
      // }).then(data => {
      //   // console.log(data)
      //   this.$set('imagelist', data.imagelist)
      //   this.vmoney = data.vmoney
      //   this.vrank = data.vrank
      //   this.vrankdiscount = data.vrankdiscount
      //   this.lokvalue = data.lokvalue
      //   this.lokvaluediscount = data.lokvaluediscount
      //   this.$set('vrechargelist', data.vrechargelist)
      // })
      Uid.getUid().then(res => {
        this.uid = res.uid
        return api.apiCall('vmoneyVmoneyRecharge', {
          uid: this.uid
        }).then(data => {
          this.$set('imagelist', data.imagelist)
          this.vmoney = data.vmoney
          this.vrank = data.vrank
          this.vrankdiscount = data.vrankdiscount
          this.lokvalue = data.lokvalue
          this.lokvaluediscount = data.lokvaluediscount
          this.$set('vrechargelist', data.vrechargelist)
        })
      }, () => {
        window.alert('下载xiaoshulinapp，更多免费账号天天享！')
        switch (this.osType) {
          case 'ios':
            window.location.href =
              'https://itunes.apple.com/us/app/zhang-hao-ban-lu/id992488773?l=zh&ls=1&mt=8'
            break
          case 'android':
            window.location.href = 'https://www.pgyer.com/XPQt'
            break
          default:
            window.location.href =
              'http://mp.weixin.qq.com/s?__biz=MzA3MjU0NDU3Ng==&mid=503801138&idx=1&sn=6f9c4a4c9e7d648304163fba94ff375a&scene=23&srcid=0715SrVJZhleC2rBVsBZNKw5#rd'
        }
      })
    },
    methods: {
      recharge (vid, value, price) {
        return api.apiCall('vmoneyPayvm', {
          uid: this.uid,
          vid: vid
        }).then(data => {
          if (_.isFunction(window.vipbanlvPayCallback)) {
            window.vipbanlvPayCallback = undefined
          }
          window.vipbanlvPayCallback = (data) => {
            if (_.isString(data)) {
              data = _.attempt(JSON.parse.bind(null, data))
            }
            if (data.orderId === window.vmorderid) {
              try {
                api.apiCall('vmoneyPayvmok', {
                  orderid: data.orderId,
                  payorderid: data.payOrderId,
                  paytype: data.payType,
                  ordersign: data.ordersign
                }).then(data => {
                  if (_.isString(data.returncode)) data.returncode = _.parseInt(data.returncode)
                  switch (data.returncode) {
                    case 0:
                      window.location.reload()
                      // window.alert('V币充值成功!')
                      break
                    case -1:
                      console.error('vmoneyPayvmok接口返回错误：用户参数不正确')
                      break
                    case -2:
                      console.error('vmoneyPayvmok接口返回错误：订单状态不正确')
                      break
                    case -3:
                      console.error('vmoneyPayvmok接口返回错误：签名不正确')
                      break
                  }
                }, err => {
                  window.alert(err.statusCode + ': ' + err.responseText)
                })
              } catch (err) {
                window.alert(err.message)
              }
            }
          }

          if (_.isString(data.returncode)) data.returncode = _.parseInt(data.returncode)
          switch (data.returncode) {
            case 0:
              // 将订单号赋给全局变量以便android调用接口时进行订单号验证
              window.vmorderid = data.orderid
              if (this.osType === 'ios') {
                webviewJavascriptBridge.init(bridge => {
                  // web -> ios
                  bridge.callHandler('vipbanlvPayCall', {
                    'orderId': data.orderid,
                    'price': price,
                    'title': `您购买了${value}V币`
                  }, response => {
                    console.log('JS got response', response)
                  })

                  // ios -> web
                  bridge.registerHandler('vipbanlvPayCallback', window.vipbanlvPayCallback)
                })
              } else if (this.osType === 'android') {
                if (_.isObject(window.vipbanlvFunc)) {
                  window.vipbanlvFunc.vipbanlvPayCall(`{"orderId": ${data.orderid}, "price": ${price}, "title": "您购买了${value}V币"}`)
                }
              }
              break
            case -1:
              console.error('vmoneyPayvm接口返回错误：用户参数不正确')
              break
            case -2:
              console.error('vmoneyPayvm接口返回错误：账号不可购买')
              break
            case -3:
              console.error('vmoneyPayvm接口返回错误：已购买过此账号')
              break
          }
        })
      },
      onSlideChangeStart (currentPage) {
        console.log('onSlideChangeStart', currentPage)
      },
      onSlideChangeEnd (currentPage) {
        console.log('onSlideChangeEnd', currentPage)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .recharge {
    .swiper {
      img {
        width: 100%;
        height: auto;
        display: block;
      }
    }
    .header {
      background-color: #333;
      overflow: hidden;
      p {
        margin: 1.5rem 0;
        text-align: center;
        color: #ffffff;
        font-size: 2.4rem;
        font-weight: bold;
      }
      div {
        margin: 1.25rem 0;
        text-align: center;
        span {
          display: inline-block;
          margin: 0 0.5rem;
          width: 0.6rem;
          height: 0.6rem;
          border-radius: 50%;
          background-color: #ac2835;
          cursor: pointer;
        }
      }
    }

    .body {
      .list-item {
        padding: 0 1.5rem;
        border-bottom: 1px solid #E2E2E2;
        font-size: 1.4rem;
        line-height: 4.2rem;
        display: flex;
        justify-content: space-between;
      }

      .shelf {
        .label {
          padding: 0 1.5rem;
          font-size: 1.4rem;
          line-height: 4.2rem;
        }
        .goods {
          list-style: none;
          margin: 0;
          padding: 0 1rem;

          li {
            float: left;
            margin: 0 0.5rem 0.8rem 0.5rem;
            padding: 0.8rem 0;
            border: 1px solid #ffc714;
            border-radius: 2px;
            width: calc(33% - 1rem);
            text-align: center;
            cursor: pointer;

            .name {
              margin-bottom: 0.8rem;
              color: #ffc714;
              font-size: 1.4rem;
              white-space: nowrap;
            }
            .price {
              color: #ffd758;
              font-size: 1.2rem;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }
</style>
